<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>主播管理</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    .my-ver-align{
      vertical-align: -2px;
    }
    .btn-link{
      color:gray;
    }
    .pagination{
    }
    .my-img{
      width:120px;
      height:120px;
      border:1px solid gray;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="container-fiuld p-3">
    <div class="card">
      <div class="card-header bg-transparent border-0">
        <ol class="breadcrumb pl-0 bg-transparent">
          <li class="breadcrumb-item pl-0"><a href="#">主播管理</a></li>
          <li class="breadcrumb-item active"><a href='#'>主播列表</a></li>
        </ol>
      </div>
      <div class="card-body">
        <div class="row border border-secondary border-top-0 border-right-0 border-left-0 pb-2">
          <div class="col-lg-12 text-muted">
            <span class="my-ver-align">所属类目：</span>
            <button type="button" class="btn btn-primary btn-sm">全部</button>
            <button type="button" class="btn btn-link">在线</button>
            <button type="button" class="btn btn-link">工作</button>
            <button type="button" class="btn btn-link">已认证</button>
            <button type="button" class="btn btn-link">未认证</button>
            <button type="button" class="btn btn-link">黑名单</button>
            <button type="button" class="btn btn-link">惩罚</button>
          </div>
        </div>
        <div class="row mt-3 mb-3">
          <div class="col-lg-12">
            <form class="form-inline">
              <label for="email">主播ID/主播昵称:</label>
              <input type="email" class="ml-4 mr-5 form-control" id="email" placeholder="请选择">
              <label for="pwd">地区：</label>
              <select id="pwd" class="form-control" value="0">
                <option value="0">请选择</option>
                <option value="1">深圳</option>
              </select>
              <!-- <div class="form-check">
                <label class="form-check-label">
                  <input class="form-check-input" type="checkbox"> Remember me
                </label>
              </div> -->
              <button type="submit" class="btn btn-primary ml-5 mr-3">查询</button>
              <button type="submit" class="btn btn-secondary">重置</button>
            </form>
          </div>
        </div>
        <div class="row mt-3 mb-3">
          <div class="col-lg-12">
            <form class="form-inline">
              <button type="submit" class="btn btn-primary mr-3">+ 新建</button>
              <button type="submit" class="btn btn-secondary">批量操作</button>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <table class="table table-responsive">
            <thead class="thead-light">
              <tr class="text-dark">
                <th><input type="checkbox"></th>
                <th>主播ID</th>
                <th>主播昵称</th>
                <th>头像</th>
                <th>姓名</th>
                <th>公会</th>
                <th>账户金币</th>
                <th>签约时间</th>
                <th>接受视频</th>
                <th>星级</th>
                <th>视频（洽贝/分钟）</th>
                <th>语音（洽贝/分钟）</th>
                <th>会员</th>
                <th>邮票</th>
                <th>提成比例</th>
                <th>支付宝账号</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="checkbox"></td>
                <td>TradeCode21(深圳)</td>
                <td>小花</td>
                <td class="text-center">
                  <img src="" class="my-img"><br>
                  通过
                </td>
                <td>张华</td>
                <td>明和公会</td>
                <td>29.6万</td>
                <td>2018-11-26</td>
                <td>是</td>
                <td>4星</td>
                <td>300</td>
                <td>500</td>
                <td>300</td>
                <td>500</td>
                <td>0.7</td>
                <td>18186228854</td>
                <td>未认证</td>
                <td><button class="btn btn-link p-0">删除</button></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>TradeCode21(深圳)</td>
                <td>小花</td>
                <td class="text-center">
                  <img src="" class="my-img"><br>
                  通过
                </td>
                <td>张华</td>
                <td>明和公会</td>
                <td>29.6万</td>
                <td>2018-11-26</td>
                <td>是</td>
                <td>4星</td>
                <td>300</td>
                <td>500</td>
                <td>300</td>
                <td>500</td>
                <td>0.7</td>
                <td>18186228854</td>
                <td>未认证</td>
                <td><button class="btn btn-link p-0">删除</button></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>TradeCode21(深圳)</td>
                <td>小花</td>
                <td class="text-center">
                  <img alt="" src="" class="my-img"><br>
                  通过
                </td>
                <td>张华</td>
                <td>明和公会</td>
                <td>29.6万</td>
                <td>2018-11-26</td>
                <td>是</td>
                <td>4星</td>
                <td>300</td>
                <td>500</td>
                <td>300</td>
                <td>500</td>
                <td>0.7</td>
                <td>18186228854</td>
                <td>未认证</td>
                <td><button class="btn btn-link p-0">删除</button></td>
              </tr>
            </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="card-footer bg-transparent border-0">
        <div class="row">
          <div class="col-lg-5 d-flex align-items-center">
            <span class="text-muted mr-2">总共400条记录 第1/80页</span>
            <ul class="pagination mb-0">
              <li class="page-item"><a class="page-link" href="#">上一页</a></li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item active"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item"><a class="page-link" href="#">4</a></li>
              <li class="page-item"><a class="page-link" href="#">5</a></li>
              <li class="page-item"><a class="page-link" href="#">...</a></li>
              <li class="page-item"><a class="page-link" href="#">6</a></li>
              <li class="page-item"><a class="page-link" href="#">下一页</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 text-center">
          <div>
            <button class="btn btn-link">帮助</button>
            <button class="btn btn-link">隐私</button>
            <button class="btn btn-link">条款</button>
          </div>
          <div class="text-muted small mb-3">copyright&copy;2018 傻鸟哥体验技术部出品</div>
        </div>
      </div>
    </div>
  </div>
  <!--主播删除后进入公会总后台回收站-->
</body>
</html>
